<!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<div id="sqlLogDetail">
	<table class="table-border table">
		<tbody>
			<tr><td>操作人</td>	<td>{{log.user_name}}</td></tr>
			<tr><td>中国时间</td>	<td>{{log.create_at}}</td></tr>
			<tr><td>ip</td>		<td>{{log.ip}}</td></tr>
			<tr><td>操作描述</td><td>{{log.desc}}</td></tr>
			<template v-for="item in detail">
			<tr>
				<td>{{item.tbname}}</td>
				<td style="padding: 0;">
					<table class="table-border table" style="margin: 0;">
						<tr>
							<th>类型</th>	<td colspan="2">{{item.type}}</td>
						</tr>
						<tr><th>SQL</th>	<td colspan="2">{{item.sql}}</td></tr>
						<tr><th width="10%">字段名</th><th width="45%">旧值</th><th width="45%">新值</th></tr>
						<tr v-for="field in item.fields">
							<td>{{field}}</td>
							<td>{{item['old'][field]}}</td>
							<td>{{item['new'][field]}}</td>
						</tr>
					</table>
				</td>
			</tr>
			</template>
		</tbody>
	</table>
</div>

<script type="text/javascript">
~function(){
	var log = <?= json_encode($log) ?>;
	var detail = <?= json_encode($detail) ?>;
	for(var i in detail){
		detail[i].old = $.isEmptyObject(detail[i].old) ? {} : detail[i].old;
		detail[i].new = $.isEmptyObject(detail[i].new) ? {} : detail[i].new;
		var fields = $.isEmptyObject(detail[i].old) ? detail[i].new : detail[i].old;
		detail[i].fields = [];
		for(var j in fields){
			detail[i].fields.push(j);
		}console.log(detail[i].new['sort']);
	}
	var sqlLogDetail = new Vue({
	    el:'#sqlLogDetail',
	    data:{
	        log:log,
	        detail:detail
	    },
	    methods:{
	    	
	    }
	});
}();
</script>